<template>
	<view>

		<view class="data-filtrate p-30">
			<view v-if="status_type !== 0">
				<view class="title">{{$zhTran('活动状态')}}</view>
				<view class="flex row-between">
					<view class="radio flex row-center" :class="[{choose:queryObject.status===''}]"
						@click="chooseType('','status')">{{$zhTran('全部')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.status===1}]"
						@click="chooseType(1,'status')">{{$zhTran('进行中')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.status===2}]"
						@click="chooseType(2,'status')">{{$zhTran('已结束')}}
					</view>
				</view>

				<u-gap height="40"></u-gap>
			</view>

			<view v-if="status_type !== 0">
				<view class="title">{{$zhTran('活动进度')}}</view>
				<view class="flex row-between">
					<view class="radio flex row-center" :class="[{choose:queryObject.been_rebate_type===''}]"
						@click="chooseType('','been_rebate_type')">{{$zhTran('全部')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.been_rebate_type===0}]"
						@click="chooseType(0,'been_rebate_type')">{{$zhTran('未达标')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.been_rebate_type===1}]"
						@click="chooseType(1,'been_rebate_type')">{{$zhTran('已达标')}}
					</view>
				</view>

				<u-gap height="40"></u-gap>
			</view>

			<view v-if="status_type === ''">
				<view class="title">{{$zhTran('活动参与')}}</view>
				<view class="flex row-between">
					<view class="radio flex row-center" :class="[{choose:queryObject.join_type===''}]"
						@click="chooseType('','join_type')">{{$zhTran('全部')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.join_type===0}]"
						@click="chooseType(0,'join_type')">{{$zhTran('未参与')}}
					</view>
					<view class="radio flex row-center" :class="[{choose:queryObject.join_type===1}]"
						@click="chooseType(1,'join_type')">{{$zhTran('参与中')}}
					</view>
				</view>
			</view>
		</view>
		<view class="functions flex row-between">
			<button class="reset-btn" @click="reset">{{$zhTran('重置')}}</button>
			<button class="apply-btn" @click="confirmQuery">{{$zhTran('确定')}}</button>
		</view>
		<w-jishuzhichi />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status_type: 0,
				queryObject: {
					status: '',
					been_rebate_type: '',
					join_type: '',
				},
				showTimeVisible: false,
				eventChannel: null
			};
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			const eventChannel = this.getOpenerEventChannel()
			this.eventChannel = eventChannel
			eventChannel.on("receiveData", (data) => {
				console.log('options', data)
				this.queryObject = data.queryObject
				this.status_type = data.status_type
			});
		},
		methods: {
			chooseType(type, field) {
				if (this.queryObject[field] === type) {
					this.queryObject[field] = ''
				} else {
					this.queryObject[field] = type
				}
			},
			reset() {
				this.queryObject = {
					status: '',
					been_rebate_type: '',
					join_type: '',
				}
			},
			confirmQuery() {
				this.eventChannel.emit("receiveData", this.queryObject);
				this.goBack()
			},
			goBack() {
				this.$Router.back()
			}
		},
	};
</script>

<style lang="scss">
	.data-filtrate {

		.title {
			color: rgba(47, 47, 47, 1);
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.radio {
			width: calc((100% - 30rpx) / 2);
			height: 80rpx;
			border: 1rpx solid #fff;
			background-color: #fff;
			color: rgba(6, 2, 32, 1);
			font-size: 26rpx;
			border-radius: 8rpx;
			text-align: center;

			&.choose {
				border-color: rgba(76, 126, 252, 1);
				color: rgba(76, 126, 252, 1);
			}
		}

		.query {

			&-line {
				border-radius: 5px;

				.line {
					height: 5rpx;
					width: 30rpx;
					background-color: rgba(166, 166, 166, 1);
				}

				.date {
					border: 1rpx solid rgba(243, 243, 243, 1);
					width: calc((100% - 70rpx) / 2);
					height: 84rpx;
					text-align: center;
					padding: 20rpx;
					background-color: #fff;
				}
			}
		}
	}

	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 30rpx constant(safe-area-inset-bottom) 30rpx;
		padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;

		.apply-btn {
			font-size: 28rpx;
			width: 70%;
			color: #fff;
			background-color: rgba(64, 115, 250, 1);
		}

		.reset-btn {
			font-size: 28rpx;
			width: 30%;
		}
	}
</style>